<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax002</title>
</head>
<body>
<button id="button" >详情</button>
<button id="button2" >收起</button>
<br><br>
<table border="1px">
    <tr>
        <th>number</th>
        <th>userName</th>
        <th>password</th>
    </tr>
    <tbody id="body">
    </tbody>
</table>
<script type="text/javascript">
    window.onload=function (){
        document.getElementById("button2").onclick=function (){
            document.getElementById("body").innerHTML=""
        }
        document.getElementById("button").onclick=function (){
            //第一步，创建XMLHttpRequest对象
            var request = new XMLHttpRequest();
            //第二部，执行回调函数
            request.onreadystatechange=function (){
                if (request.readyState == 4) {
                    if (request.status == 200) {
                        var jsonArrays = JSON.parse(request.responseText);
                        var body="";
                        var index=1;
                        jsonArrays.forEach(jsonArray=>{
                            //<tr><td>1</td><td>zhangsan</td><td>123</td>
                            body+="<tr><td>"+(index++)+"</td><td>"+jsonArray.userName+"</td><td>"+jsonArray.passWord+"</td>";
                            console.log(body)
                        })
                        document.getElementById("body").innerHTML=body;
                    }else {
                        alert(request.status)
                    }
                }
            }
            //第三步，打开通道
            request.open("get","/ajax/request02",true)
            //第四步，开始连接
            request.send()
        }
    }
</script>
</body>
</html>